<template>
	<view class="select-job-wrapper">
		<view class="job-title">
			{{isSelectJob ? '切换沟通职位' : '沟通职位'}}
			<van-icon class="title-cross" name="cross" @click="handleCloseSelectJob" />
		</view>
		<view class="job-list">
			<view :class="item.select?'job-list-item job-list-item-act':'job-list-item'" v-for="(item,index) in jobList"
				:key="index" @click="selectJobItem(item)">
				<view class="job-name substring">{{item.jobname}}</view>
				<view class="label-txt substring">
					<text class="span">{{item.education_text}}</text>
					<text class="span">{{item.experience_text}}</text>
					<text class="span">{{item.wage_text}}</text>
				</view>
			</view>
			<view class="btn-arr">
				<view class="btn-cancel" @click="cancelSelectJob()">取消</view>
				<view class="btn-communicate" @click="handleCommunicate()">去沟通</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		props: ['chatid', 'companyId', 'isSelectJob'],
		data() {
			return {
				jobList: [],
				curtName: '',
				selectItem: {}
			}
		},
		watch: {
			companyId(newValue) {
				if (newValue) {
					this.getJobList()
				}
			}
		},
		created() {
			if (this.isSelectJob && (this.companyId != '' || this.companyId != 0)) {
				this.getJobList()
			}
		},
		computed: {
			...mapState({
				imToken: state => state.imToken,
				jobId: state => state.imShowParams.jobid,
				imShowParams: state => state.imShowParams,
				LoginType: state => state.LoginType
			})
		},
		methods: {
			...mapMutations(['setImShowParams']),
			/**
			 * 获取职位列表
			 */
			getJobList() {
				http.get(api.job_list, {
						company_id: this.companyId
					})
					.then((response) => {
						let res = response.data
						if (res.code == 200) {
							this.jobList = res.data.items
							this.jobList.map(item => {
								item.select = false
							})
							this.jobList[0].select = true
							if (this.isSelectJob && this.companyId != '') {
								this.curtName = this.jobList.filter(res => {
									return res.id == this.jobId
								})[0]
								this.$emit('getJobName', this.curtName ? this.curtName.jobname : '')
							}
							this.selectItem = this.jobList[0]
						}
					})
			},
			/**
			 * 关闭切换窗口
			 */
			handleCloseSelectJob() {
				this.$emit('handleCloseSelectJob')
			},
			/**
			 * 切换职位
			 * @item 当前点击职位信息
			 */
			handleSelectJob(item) {
				http.post(api.change_job, {
					token: this.imToken,
					jobid: item.id,
					chat_id: this.chatid
				}).then((res) => {
					if (res.code == 200) {
						this.$notify({
							type: 'success',
							message: '切换成功'
						})
						this.imShowParams.jobid = item.id
						this.setImShowParams(this.imShowParams)
						this.getJobList()
						this.$emit('handleSelectJob', item)
					}
				})
			},
			selectJobItem(item) {
				this.selectItem = item
				this.jobList.map((items, index) => {
					items.select = false
					if (items.id == item.id) {
						this.jobList[index].select = true
					}
				})
			},
			/**
			 * 沟通职位
			 * @item 当前点击职位信息
			 */
			handleCommunicate() {
				this.$emit('handleCommunicate', this.selectItem)
			},
			cancelSelectJob() {
				this.$emit('cancelSelectJob')
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 切换职位开始
	.select-job-wrapper {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding-bottom: 45rpx;

		.job-title {
			position: relative;
			text-align: center;
			color: #2A2A2A;
			font-size: 32rpx;
			padding: 40rpx 0;

			.title-cross {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.job-list {
			overflow-y: auto;

			.btn-arr {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 46rpx;

				.btn-cancel {
					width: 220rpx;
					height: 80rpx;
					line-height: 80rpx;
					background: #F5F5F5;
					border-radius: 40rpx;
					margin-right: 18rpx;
					font-size: 32rpx;
					color: #2A2A2A;
				}

				.btn-communicate {
					width: 300rpx;
					height: 80rpx;
					line-height: 80rpx;
					background: linear-gradient(45deg, #1360FF, #417FFF);
					border-radius: 40rpx;
					color: #fff;
					font-size: 32rpx;
				}
			}

			.job-list-item {
				width: 540rpx;
				height: 140rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(11, 64, 255, 0.04);
				border-radius: 20rpx;
				margin: 0 auto 20rpx;
				box-sizing: border-box;
				padding: 24rpx 30rpx;
				border: 1rpx solid transparent;

				&.job-list-item-act {
					border: 1rpx solid #266DFF;
					background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(97, 149, 255, 0.15));
					box-shadow: 0px 0px 40rpx 0px rgba(11, 64, 255, 0.04);
				}

				.job-name {
					width: 100%;
					color: #2A2A2A;
					font-size: 32rpx;
					font-weight: bold;
					text-align: left;
				}

				.label-txt {
					color: #797979;
					font-size: 24rpx;
					text-align: left;
					margin-top: 10rpx;

					.span {
						margin-right: 20rpx;
						position: relative;

						&::before {
							content: '';
							display: block;
							width: 4rpx;
							height: 4rpx;
							border-radius: 50%;
							background: #797979;
							position: absolute;
							right: -10rpx;
							top: 50%;
						}

						&:last-child {
							&::before {
								display: none;
							}
						}
					}
				}

				.job-salary {
					max-width: 200px;
					color: #FF5017;
					font-size: 14px;
					line-height: 24px;
					text-align: left;
				}

				.job-request {
					max-width: 200px;
					font-size: 13px;
					color: #666666;
				}

				.select-job-btn {
					width: 130rpx;
					height: 50rpx;
					position: absolute;
					top: 50%;
					right: 0px;
					transform: translateY(-50%);
					color: #1989fa;
					border-color: #1989fa;
					border-radius: 50rpx;
					line-height: 45rpx;
					font-size: 28rpx;
					padding: 0;
				}
			}
		}
	}

	// 切换职位结束
</style>